<template>
  <div class="ent-loans gateway-common">
    <div class="gateway-common-banner">
      <h4 class="gateway-common-banner-title">应用场景</h4>
      <p class="gateway-common-banner-desc">
        近几年，国内政策从大力推动中小微企业融资增量扩面提质增效、持续优化银行内部政策、充分运用科技手段、切实提升贷款定价能力等方面，对提升中小微企业金融服务能力提出具体要求。
      </p>
      <p class="gateway-common-banner-desc">
        元素凭借对中小微信贷业务的深刻理解和对金融科技工具的前瞻探索，与大量金融机构密切合作，帮助客户应用金融科技工具解决其业务发展中的痛点。
      </p>
    </div>
    <div class="ent-loans-content gateway-common-content">
      <p class="gateway-common-content-desc">
        元素基于在信贷领域积累的深厚风控经验，结合行业领先业务专家的知识沉淀，通过模型、外部数据等模块的统一管理与灵活配置，为客户提供信贷全生命周期风险管控。
      </p>
      <ul class="ent-loans-content-module">
        <li v-for="(v, index) of list" :key="`${v.title}${index}`">
          <img v-if="index % 2 == 0" :src="v.imgSrc" class="ent-loans-content-module-icon" alt="">
          <div class="ent-loans-content-module-main" :style="index % 2 != 0 ? 'margin-left:0px;margin-right:56px' : ''">
            <p class="ent-loans-content-module-title">{{ v.title }}</p>
            <p class="ent-loans-content-module-title-en">{{ v.titleEn }}</p>
            <img :src="v.imgLine" class="ent-loans-content-module-line" alt="">
            <p class="ent-loans-content-module-desc">{{ v.desc }}</p>
          </div>
          <img v-if="index % 2 != 0" :src="v.imgSrc" class="ent-loans-content-module-icon" alt="">
        </li>
      </ul>
    </div>


  </div>
</template>
<script>
// import GatewayFooter from '../components/gateway-footer.vue'
// import RightSide from '@/components/rightSide/index.vue'
export default {
  name: 'Entloans',
//   components: { GatewayFooter, RightSide },D:\management_center_vue\src\assets\img\ent-loans-before-line.png
  data() {
    return {
      list: [
        {
          imgSrc: require('@/assets/img/chengshi6.jpg'),
          title: '贷前阶段',
          titleEn: 'Pre loan period',
          imgLine: require('@/assets/img/ent-loans-before-line.png'),
          desc:
            '针对借贷申请环节，基于元素丰富的业务经验及底层多元的变量指标，为信贷机构提供的完备风控服务，有效识别团伙欺诈、羊毛党等高风险骗贷现象，帮助信贷机构降低风险、减少资金损失。'
        },
        {
          imgSrc: require('@/assets/img/chengshi3.jpg'),
          title: '贷中预警',
          titleEn: 'Medium loan period',
          imgLine: require('@/assets/img/ent-loans-before-line.png'),
          desc:
            '针对借贷申请环节，基于元素丰富的业务经验及底层多元的变量指标，为信贷机构提供的完备风控服务，有效识别团伙欺诈、羊毛党等高风险骗贷现象，帮助信贷机构降低风险、减少资金损失。'
        },
        {
          imgSrc: require('@/assets/img/chengshi1.jpg'),
          title: '贷后阶段',
          titleEn: 'Late loan period',
          imgLine: require('@/assets/img/ent-loans-before-line.png'),
          desc:
            '旨在结合元素风控模型，识别客户放款后，借款人在一定周期内持续性风险监控评估，对于风险较低的客户给予“余额增长”、“分期循环”等策略，对风险高的客户预警提前干预，降低损失，助力客户对存量客户实现精细化分层管理。'
        },
        {
          imgSrc: require('@/assets/img/chengshi4.jpg'),
          title: '灵活的模型配置',
          titleEn: 'Model configuration',
          imgLine: require('@/assets/img/ent-loans-before-line.png'),
          desc:
            '元素的贷款风险管理系统能够针对各金融机构不同的测试点以及贷款企业的特质提供灵活的模型配置功能，为各企业提供准确的评分，满足各金融机构的需求。'
        }
      ]
    }
  },
  created() {
    this.$store.dispatch('app/setGatewayActivedIndex', '1-2-1')
  },
  methods: {}
}
</script>

<style scoped lang="scss">

.gateway-common {
  .gateway-common-banner {
    height: 560px;
    min-width: 1200px;
    background: url('~@/assets/img/nav_img1.jpg') no-repeat center;
    text-align: center;
    overflow: hidden;
    margin-top: -52px;
    .gateway-common-banner-title {
      font-size: 80px;
      font-weight: 500;
      color: black;
      margin-top: 150px;
      margin-bottom: 20px;
    }
    .gateway-common-banner-desc {
      width: 1000px;
      font-size: 22px;
      font-weight: 400;
      color: black;
      line-height: 30px;
      margin: 0 auto 0 auto;
    }
  }
  .gateway-common-content {
    padding: 60px 0 0 0;
    .gateway-common-content-desc {
      margin: 0 auto;
      width: 1000px;
      font-size: 20px;
      font-weight: 500;
      color: #333333;
      line-height: 30px;
      text-align: center;
    }
  }
}
.ent-loans {
  min-width: 1200px;
  .ent-loans-content {
    .ent-loans-content-module {
      width: 1200px;
      margin: 80px auto 40px auto;     
      li {
        width: 400px;
        display: flex;
        margin-bottom: 50px;
        transition: 0.3s;
        .ent-loans-content-module-icon {
          width: 680px;
          height: 400px;
          transition: 0.3s;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
        }
        .ent-loans-content-module-main {
          flex: 1;
          height: 210px;
          background: #ffffff;
          margin-left: 51px;
          margin-top: 58px;
          box-sizing: border-box;
          transition: 0.3s;
          .ent-loans-content-module-title {
            line-height: 20px;
            color: #333333;
            transition: 0.3s;
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: bold;
          }
          .ent-loans-content-module-title-en {
            line-height: 12px;
            color: #999999;
            margin-top: 9px;
            font-size: 12px;
            font-family: Arial;
            font-weight: bold;
            color: #999999;
            opacity: 0.5;
          }
          .ent-loans-content-module-line {
            margin-top: 48px;
          }
          .ent-loans-content-module-desc {
            margin-top: 47px;
            width: 464px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 25px;
          }
        }
        &:hover {
          transform: scale(1.01);
          .ent-loans-content-module-icon {
            box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
          }
          .ent-loans-content-module-main {
            .ent-loans-content-module-title {
              color: #2b99ff;
            }
          }
        }
      }
    }
  }
}
</style>
